
// [定义子store第一种写法]
/* import { makeAutoObservable } from 'mobx'

export default class ToDoStore {
  constructor () {
    makeAutoObservable(this)
  }

  // 需要共享的数据
  // 相当于是Vuex中的state
  msg = 'haha mobx'
  // 相当于vuex中的mutations和actions
  shareData (payload) {
    console.log( payload )
    this.msg = payload
  }

  // 相当于是Vuex中的getter
  get getMsgLength () {
    return this.msg.length
  }
} */


// [定义子store第二种写法] mobx6
// observable用于把一个变量变成为可观察的
// action表示把一个方法变成action，它可以直接修改observeable
// computed用于get操作，是计算属性，当他所关联的observerable变量发生变化时，会重新计算
import { makeObservable, action, computed } from 'mobx'
export default class ToDoStore {
  constructor () {
    makeObservable(this, {
      shareData: action,
      len: computed
    })
  }
  msg = 'hello 1234567890-'
  shareData (payload) {
    console.log( payload )
    this.msg = payload
  }

  get len () {
    const str = this.clearSpace(this.msg)
    return str.length
  }

  clearSpace (str) {
    return str.replace(/\s/img, '')
  }
}

// [mobx5写法]
/* import { action, computed, observable } from 'mobx'
export default class ToDoStore {
  @observable
  msg = 'hello, mobx5'
  @action
  shareData (payload) {
    this.msg = payload
  }
  @computed
  get length () {
    const str = this.clearSpace(this.msg)
    return str.length
  }
  clearSpace (str) {
    return str.replace(/\s/img, '')
  }
} */